<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
    body,
    html {
        margin: 0;
        padding: 0;
    }
</style>

<body>
    <svg width="800" height="700"></svg>
    </div>
    <script>

        let data = [[{ x: 0, y: 30 }, { x: 1, y: 8 }, { x: 2, y: 10 }, { x: 3, y: 14 }, { x: 4, y: 10 }, { x: 5, y: 11 }, {
            x: 6, y: 22
        }, { x: 7, y: 19 }, { x: 12, y: 14 }, { x: 14, y: 18 }, { x: 20, y: 20 }]]

        let svg = d3.select("svg"),
            margin = { top: 20, right: 20, bottom: 50, left: 50 },
            areaWidth = svg.attr("width") - margin.left - margin.right,
            areaHeight = svg.attr("height") - margin.top - margin.bottom,
            g = svg.append("g")
                .attr("transform", `translate(${margin.left},${margin.top})`)
                .attr("width", areaWidth)
                .attr("height", areaHeight)

        let xScale = d3.scaleLinear()
            .domain([0, 22])
            .range([0, areaWidth]);

        let yScale = d3.scaleLinear()
            .domain([40, 0])
            .range([0, areaHeight]);

        let xAxis = d3.axisBottom(xScale);

        let yAxis = d3.axisLeft(yScale);

        let line = d3.line()

            .x(function (d) {
                return xScale(d.x)
            })
            .y(function (d) {
                return yScale(d.y)
            });

        let t = d3.transition()
            .duration(500)
            .ease(d3.easeLinear)
        let xGrooup = g.append("g")
            .attr("transform", `translate(0,${areaHeight})`)
            .call(xAxis)

        let yGroup = g.append("g")
            .attr("transform", `translate(0,0)`)
            .call(yAxis)

        g.append("clipPath")
            .attr("id", "clip")
            .append("rect")
            .attr("width", areaWidth)
            .attr("height", areaHeight);

        let updateLine = g.append("g")
            .attr("class", "chart")
            .selectAll("line")
            .data(data)

        let enterLine = updateLine.enter();
        let exitLine = updateLine.exit();


        let path = enterLine.append("path")
            .attr("clip-path", "url(#clip)")
            .attr("class", "line")
            .attr("d", function (d) {
                return line(d)
            })
            .attr("fill", "none")
            .attr("stroke", 0)
            .transition(t)
            .attr("stroke-width", 2)
            .attr("stroke", "green")

        exitLine.remove();

        let updateDot = g.append("g")
            .attr("class", "chart")
            .selectAll("dot")
            .data(data[0])

        let enterDot = updateDot.enter();
        let exitDot = updateDot.exit();

        enterDot.append("path")
            .attr("class", "dot")
            .attr("transform", function (d) { return `translate(${xScale(d.x)},${yScale(d.y)})` })
            .attr("d", d3.symbol().type(function (d, i) {
                let n = Math.round(Math.random() * 6)
                console.log(n);
                return d3.symbols[n];
            }).size(200))
            .style("fill", "green")





    </script>
</body>









</html>